require('../css/course_video.css');


let BASE_URL = 'http://139.9.177.51:8099';

// 获取本地存储的视频地址
let videoUrls = JSON.parse(localStorage.getItem('videos'));
console.log(videoUrls);

// 获取需要的dom
let tipDom = document.querySelector('.video-main div>span')
let currrentDom = document.querySelector('.video-main div .currrent-part')
let totalDom = document.querySelector('.video-main div .total-part')
let nextDom = document.querySelector('.video-footer .icon-xiayiqu101')
let previousDom = document.querySelector('.video-footer .icon-shangyiqu101')

// 页面生成video标签
let video = document.createElement('video')
document.querySelector('.video-main').appendChild(video);

function pushcontent(i){  
    video.src = BASE_URL+videoUrls[i].videoUrl;
    tipDom.textContent = videoUrls[i].title;
    currrentDom.textContent = i+1;
    totalDom.textContent = videoUrls.length;
}
// 页面最初加载
let i = 0;
pushcontent(i);


// 暂停播放按钮的点击事件
let btnCenter = document.querySelector('.icon-bofang')
let prograssDom = document.querySelector('.prograss')
let flag = false;    // false 表示视频时未播放，页面加载
let timer;
function prograssWidth(){
    timer = setInterval(function(){
        let width = video.currentTime / video.duration * 100;
        console.log(width);
        prograssDom.style.width = `${width}%`;
    },100)
}
btnCenter.addEventListener('click',function(){
    
    if(!flag){
        video.play();  
        btnCenter.className = 'iconfont icon-24gf-pause2'
        prograssWidth();
    }else{
        video.pause();
        btnCenter.className = 'iconfont icon-bofang'
        clearInterval(timer)
    }
    flag = !flag;
    
})

// 将默认状态封装为函数
function defult(){
    prograssDom.style.width = 0;
    flag = false;
    clearInterval(timer)
    btnCenter.className = 'iconfont icon-bofang'
}

// 右边按钮的点击事件
nextDom.addEventListener('click',function(){
    i++;
    i = i>=4?0:i;
    pushcontent(i);
    defult();
})
// 左边按钮的点击事件
previousDom.addEventListener('click',function(){
    i--;
    i = i<=-1?3:i;
    pushcontent(i);
    defult();
})





